import './App.css';
import React from 'react';

import JayOne from 'assets/images/introduce1.png';
import JayTwo from 'assets/images/introduce2.png';
import JayThree from 'assets/images/introduce3.png';
import JayFour from 'assets/images/introduce4.png';

import Carousel, { CarouselItem, CarouselInfo } from './Carousel';

// 轮播图数据
const info = [
  {
    id: 1,
    image: JayOne,
    backgroundColor: '#ffffff'
  },
  {
    id: 2,
    image: JayTwo,
    backgroundColor: '#ffffff'
  },
  {
    id: 3,
    image: JayThree,
    backgroundColor: '#ffffff'
  },
  {
    id: 4,
    image: JayFour,
    backgroundColor: '#ffffff'
  }
];

const App = () => {
  return (
    <Carousel>
      {info?.map((item) => {
        return (
          <CarouselItem key={item.id} styles={{ backgroundColor: item.backgroundColor }}>
            <CarouselInfo title={item.title} describe={item.describe} image={item.image} />
          </CarouselItem>
        );
      })}
    </Carousel>
  );
};

export default App;
